<template>
	<div class="box">
		<!-- 身份登录状态 -->
		<div class="status">
			<template v-if="userStatus === 0">
				<!-- 标题 -->
				<div class="title text-4em">
					<span>交易用</span>
					<span class="blue">欧神</span>
				</div>
				<!-- 提示 -->
				<div class="font">
					<svg-icon icon-class="gift" size="1.8rem" class="gift">
					</svg-icon>
					<span>
						注册领取新人大礼包
					</span>
				</div>
				<!-- 立即注册 -->
				<div class="register">
					<el-input style="width: 260px;height: 58px;" placeholder="邮箱/手机号码" class="input_" />
					<el-button :color="btnColor" type="primary"
						style="height: 58px;padding:17px 43px;border-radius: 8px;">立即注册</el-button>
				</div>
			</template>
			<template v-if="userStatus === 1">
				<!-- 标题 -->
				<div class="title text-4em">
					<span class="blue">完成身份认证，</span>
					<span>开启</span>
					<p style="margin-top: 15px;">您的货币之旅</p>
				</div>
				<!-- 你的总资产估值 -->
				<div class="valuation">
					<p>
						您的总资产估值
					</p>
					<p>
						<span style="display: inline-block;margin-right:5px;">0.00
						</span>
						BTC
					</p>
					<p>
						今日盈亏 $0.00
					</p>
					<el-button :color="btnColor" type="primary"
						style="height: 58px;padding:17px 43px;border-radius: 8px;margin-top: 20px;">完成身份认证</el-button>
				</div>
				<!-- 公告 -->
				<div class="notice">
					<div>公告</div>
					<div>
						原来，直到这个日子，特朗普才算是锁定了xxxxxx
					</div>
					<div>
						2025-01-06
					</div>
				</div>
			</template>
			<template v-if="userStatus === 2">
				<!-- 标题 -->
				<div class="title text-4em">
					<span>跟单交易已上线，买 </span>
					<p style="display:inline-block;margin-top: 15px;">币卖币上</p>
					<span class="blue">欧神</span>
				</div>
				<!-- 你的总资产估值 -->
				<div class="valuation">
					<p>
						您的总资产估值
					</p>
					<p>
					<span style="display: inline-block;margin-right:5px;">0.00</span> BTC
					</p>
					<p>
						今日盈亏 $0.00
					</p>
					<el-button :color="btnColor" type="primary"
						style="height: 50px;padding:17px 43px;border-radius: 8px;margin-top: 20px;"
						@click="rechargeDialogShow=true">充值</el-button>
					<el-button color="#C9CDD4" type="primary"
						style="height: 50px;padding:17px 43px;border-radius: 8px;margin-top: 20px;"
						@click="jumpTo('/transaction/spot')">交易</el-button>
					<el-button color="#C9CDD4 " type="primary"
						style="height: 50px;padding:17px 43px;border-radius: 8px;margin-top: 20px;"
						@click="jumpTo('/transaction/exchange')">兑换</el-button>
				</div>
				<!-- 公告 -->
				<div class="notice">
					<div>公告</div>
					<div>
						原来，直到这个日子，特朗普才算是锁定了xxxxxx
					</div>
					<div>
						2025-01-06
					</div>
				</div>
			</template>
		</div>
		<!-- 新闻资讯 -->
		<div class="news">
			<div class="top">
				<p class="title">
					<span class="red_">新</span><span>闻资讯</span>
				</p>
				<p class="more" @click="toNews">
					查看更多
				</p>
			</div>
			<div class="list">
				<p>xxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxx</p>
				<p>xxxxxxxxxxxxxxxx</p>
			</div>
		</div>
	</div>
	<recharge-dialog :show-dialog="rechargeDialogShow" @close="closeRechargeDialog"></recharge-dialog>
</template>
<script lang="ts" setup>
import RechargeDialog from '../pop/RechargeDialog.vue';
import styles from '@/styles/variables.module.scss';
import useJump from '@/utils/jump';

const { jumpTo } = useJump();

const toNews = () => {
	jumpTo('/news')
}
//判断用户状态 0 未登录，1 未认证，2，已认证
const userStatus = ref<0 | 1 | 2>(2)

// 按钮颜色
const btnColor = computed(() => {
	return styles.btnThemeColor;
})

const rechargeDialogShow = ref<boolean>(false);

const closeRechargeDialog = (val: any) => {
	rechargeDialogShow.value = val;
}

</script>
<style lang="scss" scoped>
.box {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;

	.status {
		.title {
			>span {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 5rem;
				font-weight: bold;
				line-height: 90px;
				color: #000;
			}

			>p {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 5rem;
				font-weight: bold;
				color: #000;
			}

			.blue {
				color: $btn-theme-color;
			}
		}

		.font {
			display: flex;
			align-items: center;
			margin: 40px 0;

			.gift {
				margin-right: 10px;
			}

			>span {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: 400;
				color: #000;
			}
		}

		.valuation {
			>p {
				margin-top: 20px;
			}

			>p:nth-child(1) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #000000;
			}

			>p:nth-child(2) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 30px;
				color: #000000;
			}

			>p:nth-child(3) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #000000;
			}
		}

		.register {
			.input_ {
				margin-right: 10px;
			}
		}

		.notice {
			margin-top: 20px;
			display: flex;
			align-items: center;

			>div:nth-child(1) {
				padding: 2px 4px;
				background: #07B175;
				border-radius: 4px 4px 4px 4px;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				margin-right: 5px;
			}

			>div:nth-child(2) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #000000;
				/* 使用省略号表示被截断的文本 */
				width: 320px;

				/* 禁止文本换行 */
				overflow: hidden;
				font-size: 16px;

				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			>div:nth-child(3) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #86909C;
			}
		}
	}

	.news {
		width: 30vw;
		padding: 1.5vw;
		background-color: rgb(249 249 249);
		border-radius: 10px;
		height: 370px;

		.top {
			display: flex;
			align-items: end;
			justify-content: space-between;

			.title {
				/* 字体加粗 */
				font-family: YouSheBiaoTiHei-Regular;

				/* 字体类型 */
				font-size: 2rem;
				font-style: italic;
				font-weight: bolder;

				.red_ {
					color: #EE092F;
				}
			}

			.more {
				font-size: 16px;
			}
		}

		.list {
			>p {
				/* 使用省略号表示被截断的文本 */
				width: var(30vw - 3vw);
				margin: 15px 0;

				/* 禁止文本换行 */
				overflow: hidden;
				font-size: 16px;

				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>
